<template>
  <mid-dialog-box
    v-if="isShowDialog"
    :title="title"
    @closeMidDialog="toggleShow"
  >
    <div class="contentBox flex-between">
      <div class="left">
        <header v-if="!isShowAddressList && !isShowGroups && addType !== 5">
          <single-record
            :name="'通讯录'"
            :src="require('@/assets/message/chatList.png')"
            @click.native="changeList('addressList')"
          ></single-record>
          <single-record
            v-show="addType === 3 || addType === 4"
            :name="'群组'"
            :src="require('@/assets/addressList/group.png')"
            @click.native="changeList('groups')"
          ></single-record>
          <p class="desc">
            最近联系人
          </p>
        </header>
        <address-List
          ref="addressList"
          v-if="isShowAddressList"
          @backRecent="backRecent"
          @selectUser="selectUser"
        ></address-List>
        <groups
          ref="groups"
          v-else-if="isShowGroups || addType === 5"
          @selectUser="selectUser"
          @backRecent="backRecent"
        ></groups>
        <div v-else class="contentLeft self_scroll">
          <div v-if="!chatInformation.length" class="none">暂无最近聊天</div>
          <div v-else class="userList">
            <single-record
              v-for="item in chatInformation.filter(it => it.id_type === 1)"
              :key="item.id"
              :name="item.name"
              :id="item.id"
              :type="'checkBox'"
              :ref="'user' + item.id"
              :imgID="$store.state.chatInformation.userList[item.id].user_img_id"
              @selectUser="selectUser"
            ></single-record>
          </div>
        </div>
      </div>
      <div class="right">
        <header v-if="addType < 2">
          <p>*群名称</p>
          <input type="text" placeholder="请输入" v-model="groupName" />
        </header>
        <div class="selectBox" :class="addType >= 2 ? 'longList' : ''">
          <div class="searchBox">
            <div class="search flex-start">
              <span v-if="addType < 2 || addType === 5">{{ myself.user_name }}</span>
              <span v-if="addType === 1" style="margin-left: 0.08rem">{{
                $store.state.chatInformation.userList[current_contact.id]
                  .user_name
              }}</span>
              <input
                type="text"
                placeholder="搜索"
                @focus="toggleShowSearchBox"
                @blur="toggleShowSearchBox"
              />
            </div>
            <div class="searchContent" v-if="showSearchBox">
              <header>
                <p>你可能想找</p>
              </header>
              <div class="userList" v-if="searchData.length">
                <single-record
                  v-for="item in searchData"
                  :key="item.id"
                  :name="item.name"
                  :id="item.id"
                  :src="item.src"
                ></single-record>
              </div>
              <div class="nosearch" v-else>暂无搜索结果</div>
            </div>
          </div>
          <ul class="selectedList self_scroll">
            <li
              class="flex-start"
              v-for="item in selectedList"
              :key="item.user_id"
            >
              <span>{{ item.user_name }}</span>
              <img
                src="@/assets/message/close.png"
                alt=""
                class="cp"
                @click="deleteUser(item.user_id)"
              />
            </li>
          </ul>
        </div>
        <div class="footer flex-end">
          <div
            v-if="disabledConfirm"
            class="btn-blue2"
            style="background:#ebedf3; cursor: not-allowed"
          >
            确定 ({{ totalLength }})
          </div>
          <div v-else class="btn-blue2" @click="confirm">
            确定 ({{ totalLength }})
          </div>
        </div>
      </div>
    </div>
  </mid-dialog-box>
</template>

<script>
import { mapState } from 'vuex'
import singleRecord from './singleRecord'
import addressList from './addressList'
import groups from './groups'
import { sendSock } from '@/utils/socketSend'
export default {
  components: {
    singleRecord,
    addressList,
    groups
  },
  data () {
    return {
      mainTip: '最近聊天',
      contentLeftData: [
        // 左栏数据
        // { id: 0, name: '牛战士' },
        // { id: 1, name: '哈希拉马' },
      ],
      isShowAddressList: false, // 左侧数据是否为通讯录
      isShowGroups: false, // 左侧数据是否为群组
      isShowDialog: false,
      showSearchBox: false,
      // 群名称
      groupName: ''
    }
  },
  computed: {
    title () {
      let name = ''
      switch (this.addType) {
        case 0:
          name = '发起群聊'
          break
        case 1:
          name = '添加群成员'
          break
        case 3: case 4:
          name = '添加参会人'
          break
        case 5:
          name = '发起群会议'
          break
        default:
          name = '添加新成员'
          break
      }
      return name
    },
    searchData () {
      return [
        // { id: 0, name: '吗达拉', src: require('@/assets/test/nzs.png') },
        // { id: 1, name: '哈希拉马', src: require('@/assets/test/nzs.png') }
      ]
    },
    myself () {
      return this.$store.state.user.userInfo
    },
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    },
    chatInformation () {
      return this.$store.state.chatInformation.chatInformation
    },
    ...mapState('groups', ['addType', 'currentList', 'selectedList']),
    totalLength () {
      // 确定按钮的人数
      let length = 0
      switch (this.addType) {
        case 0:case 5:
          length = this.selectedList.length + 1
          break
        case 1:
          length = this.selectedList.length + 2
          break
        default:
          length = this.selectedList.length
          break
      }
      return length
    },
    disabledConfirm () {
      // 确定按钮置灰
      let show = false
      switch (this.addType) {
        case 2:
        case 3:
          show = this.totalLength < 1
          break
        case 4:
          show = this.selectedList.length === 0
          break
        case 5:
          show = this.totalLength < 2
          break
        default:
          show = this.totalLength < 3 || !this.groupName.trim()
          break
      }
      return show
    }
  },
  methods: {
    // 选择用户
    selectUser (user, val) {
      if (val) {
        this.$store.commit('groups/add_selectUser', user)
        // this.selectedList.push(user)
      } else {
        this.deleteUser(user.user_id)
      }
    },
    deleteUser (id) {
      // 右侧人物卡片删除
      if (this.$refs.addressList) {
        this.$refs.addressList.$refs[`user${id}`][0].unselect() // 取消左侧选中状态
      } else if (this.$refs.groups) {
        this.$refs.groups.$refs[`user${id}`][0].unselect() // 取消左侧选中状态
      } else {
        this.$refs[`user${id}`][0].unselect() // 取消左侧选中状态
      }
      this.$store.commit('groups/delete_selectUser', id)
      // this.selectedList = this.selectedList.filter(item => item.user_id !== id)
    },
    toggleShow () {
      this.isShowDialog = !this.isShowDialog
      if (!this.isShowDialog) {
        this.$store.commit('groups/set_selectedList', [])
      }
      this.isShowAddressList = false
      this.isShowGroups = false
      this.mainTip = '最近聊天'
    },
    // 切换为通讯录
    changeList (type) {
      switch (type) {
        case 'addressList':
          this.isShowAddressList = true
          break
        case 'groups':
          this.isShowGroups = true
          break
        default:
          break
      }
    },
    backRecent () {
      this.isShowGroups = false
      this.isShowAddressList = false
    },
    toggleShowSearchBox () {
      this.showSearchBox = !this.showSearchBox
    },
    // 确定
    confirm () {
      switch (this.addType) {
        case 2:
          this.$store
            .dispatch('groups/addMembers', this.current_contact.id)
            .then(res => {
              if (res.data.code === 200) {
                this.toggleShow()
              }
            })
          break
        case 3:
          // 预定会议参会人
          this.$store.commit('conference/set_resCf_selectedList', { list: this.selectedList })
          this.toggleShow()
          break
        case 4: { // 会议室邀请
          const invites = this.selectedList.map(item => item.user_id)
          sendSock({
            type: '4.1.6',
            body: {
              cf_id: this.$store.state.conferenceRoom.cf_id,
              invite_ids: invites
            }
          })
          this.toggleShow()
          break
        }
        case 5: { // 发起群会议
          const invites = this.selectedList.map(item => item.user_id)
          // 建立快速会议
          this.$store.dispatch('conferenceRoom/createQuickConference', { cfName: this.$store.state.chatInformation.groupList[this.$store.state.chatInformation.current_contact.id].group_name + '的会议' }).then(res => {
            if (res.data && res.data.code === 200) {
              this.$store.commit('conferenceRoom/set_cf_type', 'conferenceRoom')
              // 定时器判断是否用户已经加入会议
              const timer = setInterval(() => {
                if (this.$store.state.conferenceRoom.cf_id) {
                  sendSock({
                    type: '4.1.6',
                    body: {
                      cf_id: this.$store.state.conferenceRoom.cf_id,
                      invite_ids: invites
                    }
                  })
                  clearInterval(timer)
                }
              }, 100)
              this.toggleShow()
            }
          })
          break
        }
        default:// 创建群聊
          this.$store
            .dispatch('groups/createGroupChat', this.groupName)
            .then(res => {
              if (res.data.code === 200) {
                this.toggleShow()
                this.groupName = ''
              }
            })
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
.contentBox {
  padding-right: 30px;
  height: 100%;
  .left {
    width: 300px;
    height: 100%;
    // background-color: plum;
    margin-right: 30px;
    border-right: 1px solid #ebedf3;
    header {
      padding-top: 16px;
      &::v-deep .message {
        padding-left: 16px;
        .messageBox img.other {
          width: 40px;
          height: 40px;
        }
      }
      &::v-deep .infoBox {
        width: 208px;
      }
      .desc {
        margin-top: 7px;
        position: relative;
        padding: 9px 0px 4px 16px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        text-align: left;
        color: #9eaac4;
        line-height: 17px;
        // border-bottom: 1px solid #ebedf3;
        &::after {
          content: "";
          position: absolute;
          width: 260px;
          height: 1px;
          background-color: #ebedf3;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .blue {
        border-top: 1px solid #ebedf3;
        color: #435eea;
      }
    }
    .contentLeft {
      height: calc(100% - 110px);
      .none {
        opacity: 1;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #5f7196;
        line-height: 17px;
        padding-top: 61px;
        text-align: center;
      }
      .userList {
        // border-top: 1px solid #ebedf3;
        .messageBox {
          .avatarBox {
            .other {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }
  }
  .right {
    width: 400px;
    height: 100%;
    // background-color: skyblue;
    padding-top: 16px;
    header {
      p {
        opacity: 1;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #5f7196;
        line-height: 20px;
        letter-spacing: 0px;
        padding-bottom: 8px;
      }
      input {
        width: 100%;
        height: 40px;
        opacity: 1;
        border: 1px solid #d8dee9;
        border-radius: 3px;
        padding-left: 12px;
        font-size: 14px;
      }
    }
    .selectBox {
      width: 100%;
      height: 368px;
      padding: 8px;
      border: 1px solid #d8dee9;
      border-radius: 3px;
      margin-top: 20px;
      .searchBox {
        position: relative;

        .search {
          span {
            padding: 5px 8px;
            opacity: 1;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #0D172C;
            line-height: 17px;
            letter-spacing: 0px;
            background: rgba(48, 78, 236, 0.05);
            border-radius: 2px;
          }
          input {
            width: 228px;
            height: 28px;
            font-size: 12px;
            color: #0D172C;
            line-height: 28px;
            border: none;
            padding-left: 16px;
          }
        }
        .searchContent {
          width: 360px;
          height: 360px;
          background-color: #fff;
          position: absolute;
          top: 30px;
          border-radius: 4px;
          box-shadow: 0px 4px 24px 0px #d8dee9;
          padding: 8px 15px;
          header {
            p {
              line-height: 25px;
              height: 25px;
              opacity: 1;
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #9eaac4;
              border-bottom: 1px solid #ebedf3;
            }
          }
          .nosearch {
            margin-top: 60px;
            height: 17px;
            font-size: 12px;
            text-align: center;
            color: #5f7196;
            line-height: 17px;
          }
        }
      }

      .selectedList {
        margin-top: 8px;
        height: 320px;
        li {
          padding: 8px;
          float: left;
          background: rgba(48, 78, 236, 0.05);
          border-radius: 2px;
          margin: 0 8px 8px 0;
          span {
            opacity: 1;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #0D172C;
            letter-spacing: 0px;
            height: 17px;
            line-height: 17px;
          }
          img {
            margin-left: 8px;
            height: 12px;
          }
        }
      }
    }
    .longList {
      height: 456px;
      margin-top: 0;
    }
    .footer {
      padding-top: 24px;
    }
  }
}
</style>
